'use strict'
import { View } from '../../component'
import style from './css.css'
import SigCard from './SigCard'
import { observer, inject } from 'mobx-react'

@inject('user') @observer class SignCardBox extends React.Component {
  static propTypes = {
    user: PropTypes.object
  }

  render () {
    // 0: 未签到，1: 已签到，2: 今日
    const { signList, accSignDay } = this.props.user
    if (signList.length === 0) {
      return ''
    }
    return (
      <View>
        <View className={style.sigCardBox}>
          <SigCard feed={signList[0]} sigState={accSignDay === 0 ? 2 : (accSignDay >= 1 ? 1 : 0)} />
          <SigCard feed={signList[1]} sigState={accSignDay === 1 ? 2 : (accSignDay >= 2 ? 1 : 0)} />
          <SigCard feed={signList[2]} sigState={accSignDay === 2 ? 2 : (accSignDay >= 3 ? 1 : 0)} />
          <SigCard feed={signList[3]} sigState={accSignDay === 3 ? 2 : (accSignDay >= 4 ? 1 : 0)} />
        </View>
        <View className={style.sigCardBox2}>
          <SigCard feed={signList[4]} sigState={accSignDay === 4 ? 2 : (accSignDay >= 5 ? 1 : 0)} />
          <SigCard feed={signList[5]} sigState={accSignDay === 5 ? 2 : (accSignDay >= 6 ? 1 : 0)} />
          <SigCard feed={signList[6]} sigState={accSignDay === 6 ? 2 : (accSignDay >= 7 ? 1 : 0)} />
        </View>
      </View>
    )
  }
}

export default SignCardBox
